<template>
  <div class="exam-item-info">
    <div class="paper_panel" v-for="item in paperInfo.list" :key="item.id" @click="openPaper(item)">
      <img class="cover" :src="item.imgUrl" />
      <div class="paper_info">
        <div class="title">
          <span v-text="item.paperTitle"></span>
          <el-tag size="mini" :type="item.status===2?'info':'warning'">{{item.statusText}}</el-tag>
        </div>
        <div class="text_color_666 text_size_8">
          <span v-text="getRushTypeText(item.rushType)"></span>
          <el-divider direction="vertical"></el-divider>
          <span>共{{item.questionNum}}道题</span>
          <el-divider direction="vertical"></el-divider>
          <span>
            总分
            <span class="text_color_429688">{{item.rushPoints}}</span>&nbsp;分
          </span>
        </div>
        <p class="text_color_666">限制时间&nbsp;{{item.rushTimeLimit}}&nbsp;分钟</p>
        <p class="text_color_999999">{{item.createUserName+'&nbsp;创建于&nbsp;'+item.createTimeStr}}</p>
      </div>
    </div>
    <el-pagination
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="paperInfo.page"
      :page-sizes="[5,10, 20, 30, 40]"
      :page-size="paperInfo.size"
      :layout="PAGE_LAYOUT"
      :total="paperInfo.total"
    ></el-pagination>
  </div>
</template>

<script>
import {
  getRushTypeText
} from '@/assets/js/models'

export default {
  name: 'RushItemInfo',
  props: {
    paperInfo: {
      type: Object,
      default: function () {
        return {
          page: 1,
          size: 5,
          total: 0,
          list: []
        }
      }
    }
  },
  watch: {
    // 'paperInfo.list'(val) {
    //   this.list = val
    // }
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    openPaper(item) {
      this.$emit('click', item)
    },
    sizeChange(val) {
      this.$emit('size-change', val)
    },
    pageChange(val) {
      this.$emit('page-change', val)
    },
    getRushTypeText
  }
}
</script>

<style lang="less">
.exam-item-info {
  .paper_panel {
    display: flex;
    cursor: pointer;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 1.1vw;
    margin-bottom: 1vw;

    .cover {
      width: 160px;
      height: 120px;
    }

    .paper_info {
      margin-left: 1vw;

      .title {
        font-size: 18px;
        color: #333333;
        font-weight: bold;

        .el-tag {
          margin-left: 1vw;
          border-radius: 0.2vw;
          color: white;
          font-size: 0.7vw;
          font-weight: normal;
        }

        .el-tag--warning {
          background-color: #f2ac17;
        }

        .el-tag--info {
          background-color: #c5c5c5;
        }
      }

      .text_color_666 {
        display: flex;
        align-items: center;
        margin-top: 0.5vw;

        .el-divider--vertical {
          margin: 0px 1.2vw;
        }
      }

      .text_color_999999 {
        margin-top: 0.5vw;
      }

      .el-pagination {
        text-align: right;
      }
    }
  }
}
</style>